<script setup>

import ZoomInBanner from "@/components/ZoomInBanner.vue";
import IntroSection from "@/components/IntroSection.vue";
import ScrollerBanner from "@/components/ScrollerBanner.vue";
import SegTitle from "@/components/SegTitle.vue";
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import {cases} from "@/views/case-details/mockCase.ts";
import CasePopup from "@/views/case-details/CasePopup.vue";
import {allCases} from "@/assets/js/all-case.ts";

const state = ref({
  showAdvantage: true,
  curCase: {},
  showCasePopup: false,
})
const data = {
  number: '02',
  title: '品牌策划设计',
  eng: 'Brand Planning and Design',
  desc: '用视觉驱动品牌价值和财富的持续增长',
  detail: '专注于全球本地化品牌视觉设计服务，我们用视觉驱动品牌价值和财富的持续增长。我们相信品牌不仅是一种外在形象，更是文化的传承与表达。品牌之美与本地化文化共鸣相结合可以实现销售共赢。我们坚持用策略、全球本地化文化和视觉设计解决品牌商业问题，将品牌故事与本地化人文关怀融合，激发消费者的情感共鸣，提升客户的品牌价值，促进市场业绩增长和财富增值，最终实现持久的商业成功。',
  titles: ['品牌视觉识别设计', '数字化设计与用户体验设计', '内容与传播规划设计', '空间与展示设计']
}
const list = [
  {
    title: '全球本地化设计',
    eng: 'Global localization design',
    desc: '融合本地化文化精髓为品牌注入强大的力量，打造兼具全球吸引力与共地共鸣的品牌视觉形象',
    icon: '05'
  },
  {
    title: '品牌与人的情感连接',
    eng: 'Emotional connection between brands and people',
    desc: '我们强调品牌与人的情感连接，结合时代需求进行创新，从多角度展示品牌的时代风采和永恒魅力',
    icon: '06'
  },
  {
    title: '适应与创新',
    eng: 'Adaptation and innovation',
    desc: '在保持品牌一致性的同时，灵活适应市场需求，持续推动创新与增长',
    icon: '07'
  },
  {
    title: '策略+文化+设计',
    eng: 'Strategy + Culture + Design',
    desc: '我们坚持用策略、文化和设计相结合的方法解决品牌的商业问题，实现品牌价值的最大化',
    icon: '08'
  },
]
const randomCase = () => {
  let caseIds = allCases.filter(item => item.category === '品牌策划设计').map(item => item.caseId)
  if (caseIds.length % 2 !== 0) {
    caseIds.push(caseIds[0])
  }
  // 随机打乱顺序
  caseIds.sort(() => 0.5 - Math.random())
  return caseIds;
}
onMounted(() => {
  window.addEventListener('popstate', handlePopState);
  watch(() => state.value.showCasePopup, (newVal) => {
    document.body.style.overflow = newVal ? 'hidden' : '';
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
const handlePopState = (event) => {
  if (state.value.showCasePopup) {
    state.value.showCasePopup = false;
    document.body.style.overflow = '';
  }
};
const showCasePopup = (caseId) => {
  state.value.curCase = cases.find(it => it.caseId === caseId);
  state.value.showCasePopup = true;
}
</script>

<template>
  <view class="seg1 container"/>
  <IntroSection class="introSection" :data="data"/>
  <SegTitle title="我们的优势" label="OUR ADVANTAGES" :enter="state.showAdvantage"/>
  <ZoomInBanner :index="1" :list="list"/>
  <SegTitle title="案例展示" label="CASE PRESENTATION" :enter="state.showAdvantage"/>
  <ScrollerBanner :randomIds="randomCase()" @onItemClick="showCasePopup"/>
  <CasePopup :show="state.showCasePopup"
             :article="state.curCase"
             @onClose="state.showCasePopup = false"/>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * 1024 / 1920);
  overflow-y: unset;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_service2_bg.png");
}

.introSection {
  z-index: 1;
  margin-top: -27%;
}
</style>